<template>
  <div>
    <el-card shadow="naver" class="card">
      <div slot="header">
        <span>{{ title }}</span>
      </div>
      <el-form
        :rules="rules"
        :model="form"
        ref="form"
        label-width="80px"
        :inline="false"
        size="small"
      >
        <el-form-item prop="author" label="作者">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item prop="title" label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="form.isShow"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <!-- 摘要 -->
        <el-form-item label="摘要" size="small">
          <el-input v-model="form.summary" placeholder="摘要"></el-input>


        </el-form-item>

        <el-form-item label="封面图片">
          <el-upload
            ref="upload"
            :action="uploadUrl"
            :headers="headers"
            :on-success="uploadSuccess"
          >
            <el-button size="mini" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            v-if="form.coverImg"
            :src="form.coverImg"
            style="height: 100px"
            alt=""
          />
        </el-form-item>

        <el-form-item label="切换富文本类型">
          <el-radio-group v-model="form.editorType">
            <el-radio :label="0">富文本</el-radio>
            <el-radio :label="1">markdown</el-radio>
          </el-radio-group>
          <span class="warin">
            <i class="el-icon-warning" />
            注意!切换编辑器会清空编辑内容
          </span>
          <TiEditor ref="Ti" v-show="form.editorType === 0" />
          <MdEditor ref="Md" v-show="form.editorType === 1" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSubmit">{{
            id ? '立即修改' : '立即新增'
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import articleApi from '@/api/content/article'
import mixin from '@/mixins/index'
import TiEditor from '@/components/Tinymce'
import MdEditor from '@/components/MarkdownEditor'
export default {
  mixins: [mixin],
  components: { TiEditor, MdEditor },
  data() {
    return {
      id: '',
      title: '新增文章',
      radio: 2,
      form: {
        author: '',
        title: '',
        isShow: 1,
        coverImg: '',
        editorType: 0 ,//默认是富文本
        abstract:"",
      },
      rules: {
        author: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }]
      },
      loading: false
    }
  },
  created() {
    
  },
  mounted(){
this.id = this.$route.params.id
    if (this.id) {
      this.title = '编辑文章'
      this.getArticleDetail()
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //提交前,给form添加富文本的值
          if (this.form.editorType === 0) {
            this.form.content1 = this.$refs.Ti.getContent()
          } else {
            this.form.content1 = this.$refs.Md.getHtml()
          }

          if (this.id) {
            this.loading = true
            articleApi.updateArticle(this.form).then((res) => {
              if (res.success) {
                this.$router.push({ name: 'ArticleList' })
              } else {
                this.$message.error('编辑失败')
              }
              this.loading = false
            })
          } else {
            this.loading = true
            // console.log(this.form.cuntent1)
            articleApi.addArticle(this.form).then((res) => {
              if (res.success) {
                this.$router.push({ name: 'ArticleList' })
              } else {
                this.$message.error('新增失败')
              }
              this.loading = false
            })
          }
        } else {
          this.$message.error('请填写必要信息')
          return false
        }
      })
    },
    getArticleDetail() {
      articleApi.articleDetailApi(this.id).then((res) => {
        if (res.success) {
          // console.log(res)
          this.form = res.data.productArticle
          if (this.form.editorType === 0) {
            //给富文本赋值
            this.$refs.Ti.setDelayContent(this.form.content1)
          } else {
            this.$refs.Md.setHtml(this.form.content1)
          }
        } else {
          this.$message.error('获取明细失败')
        }
      })
    },
    uploadSuccess(res) {
      if (res.success) {
        this.form.coverImg = res.data.fileUrl
      } else {
        this.$message.error('图片上传失败')
      }
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style scoped lang="scss">
.card {
  margin: 30px;
}
</style>